<template lang="html">
  <div class="banner">
  <swiper :options="swiperOption">
  <swiper-slide v-for="(items,index) in recommendedHouseList" :key="items.key">
    <div class="slideImg">
      <img :src="items.imgSrc" alt="">
      <span v-if="items.rentType==1">&yen;{{items.rentMoney/100}}</span>
      <span v-else>&yen;{{items.rentDayMoney}}/晚</span>
    </div>
    <p class="houseTitle">{{items.title}}</p>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  <div class="jc"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ['recommendedHouseList'],
  data: () => ({
    swiperOption: {
        freeMode : true,
        slidesPerView: 2.8,
        spaceBetween: 10,
        paginationClickable: true,
        onTouchEnd: function() {
            swiper.startAutoplay()
        }
     },
    bannerImgList:[{
      imgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856533113&di=a8aaf1333d96e7e2b641d5dbbcb2edbe&imgtype=0&src=http%3A%2F%2Fpic114.nipic.com%2Ffile%2F20161109%2F21050188_170253171000_2.jpg'
    },{
      imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856559938&di=6131ba5b6cefebc9378a70b2c1eb5ca7&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140419%2F0005018307715498_b.jpg'
    },{
      imgSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523856580198&di=9f4d4b3d870645020748200998846a40&imgtype=0&src=http%3A%2F%2Fp3.gexing.com%2FG1%2FM00%2F95%2F2C%2FrBACFFPsoOmSqfDdAAII0V7jlbA954.jpg'
    }]
  })
}
</script>

<style lang="scss" scoped>

.banner .swiper-pagination-bullet{background:white;}
.banner .swiper-pagination-bullet-active{background:$lightColor;}
.banner{
  padding: 0;
  .slideImg{
    position: relative;
    span{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background: rgba(0,0,0, 0.5);
      color: white;
      padding: 4px;
    }
  }
  img{
    width: 100%;
    height: 5rem;
  }
  .houseTitle{
    padding: 4px;
  }
}
</style>
